<template>
	<view class="wrap">
		<view class="search">
			<u-search placeholder="请输入姓名" v-model="queryForm1.formData.keywords" @search="search" @custom="search"
				:show-action="true">
			</u-search>
		</view>
		
		<view class="content">
			{{form.comment}} 
		</view>
		<image class="banner" :src="form.screenshot[4]" mode=""></image>
		<image class="banner" :src="form.screenshot[5]" mode=""></image>
		
		<u-section title="调解员公示" font-size="32" :right="false"></u-section>
		
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.avatar" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.nickname}}
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.avatar" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.nickname}}
					</view>
					<view class="row">
						<view class="row form-col">
							<view class="demo-price">{{item.successList.length}}</view>
							<view class="">成功</view>
						</view>
						<view class="row form-col">
							<view class="demo-price">{{item.newsList.length}}</view>
							<view class="">总数量</view>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					
				},
				// 列表查询请求数据
				queryForm1: {
					// 分页数据
					pagination: {
						pageIndex: 1, //当前页码
						pageSize: 8, //每页显示数量
					},
					// 表单数据源
					formData: {
						keywords: "", // 关键字
						role: 'tiaojie_employee',
					},
					// 查询匹配规则
					columns: [{
						key: "keywords",
						mode: "%%",
						fieldName: "nickname",
					}, {
						key: "role",
						mode: "="
					}],
					// 排序规则
					sortRule: [{
						name: "sort",
						type: "asc"
					}, {
						name: "_add_time",
						type: "desc"
					}]
				},
				loadStatus: 'loadmore',
				flowList: [],
			}
		},
		mounted() {
			this.initPage();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			this.addRandomData();
		},
		methods: {
			initPage(){
				// #ifdef H5
				this.$nextTick(function() {
				// #endif
					this.getData();
					this.addRandomData();
				// #ifdef H5
				})
				// #endif
			},
			// 应用详情
			getData(){
				vk.callFunction({
						url: this.$api.AppInfo,
						loading: true,
						data: {
							appid: vk.getVuex('$app.appInfo.appId')
						},
					})
					.then(res => {
						console.log('应用详情', res)
						this.form = res.item
					})
			},
			search() {
				this.loadStatus = 'loading';
				this.queryForm1.pagination.pageIndex = 1;
				this.clear();
				this.addRandomData();
			},
			addRandomData() {
				// for(let i = 0; i < 10; i++) {
				// 	let index = this.$u.random(0, this.list.length - 1);
				// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				// 	let item = JSON.parse(JSON.stringify(this.list[index]))
				// 	item.id = this.$u.guid();
				// 	this.flowList.push(item);
				// }
				
				vk.callFunction({
						url: this.$api.EmployeeList,
						loading: true,
						data: {
							...this.queryForm1,
							// pagination: {
							// 	pageIndex: this.page.num, //当前页码
							// 	pageSize: this.page.size, //每页显示数量
							// },
						},
					})
					.then(res => {
						console.log('获取列表res', res)
						if(res.total > 0){
							if (this.queryForm1.pagination.pageIndex == 1) this.clear();; //如果是第一页需手动置空列表
							this.flowList = this.flowList.concat(res.rows); //追加新数据
							this.queryForm1.pagination.pageIndex++;
							
							if(res.hasMore){
								this.loadStatus = 'loadmore';
							}else{
								this.loadStatus = 'nomore';
							}
						}else{
							this.queryForm1.pagination.pageIndex = 1;
							this.clear();
							this.loadStatus = 'nomore';
						}
					})
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style scoped>
	.demo-title{
		text-align: center;
	}
	.banner{
		display: block;
		margin: 0 auto 24rpx;
		width: 90%;
		text-align: center;
	}
	.content{
		margin: 0 auto 24rpx;
		font-size: 14px;
		letter-spacing: 1px;
	}
</style>